.gallery
  background-image: url("@/image/gallery/bg_1920.png")
  background-repeat: no-repeat
  background-size: cover
  background-position: center
  &__container
    padding-top: 80px
    padding-bottom: 80px
  &__title
    margin-bottom: 22px
    color: $white
  &__content-left
    max-width: 400px
    margin-right: 50px
  &__text
    margin-bottom: 17px
    font-weight: 600
    font-size: 16px
    color: $white

.choices
  margin-bottom: 185px
  width: 400px
  height: 40px
  background: inherit
  border-radius: 6px
  border: 1px solid $white
  &:focus:not(:hover):not(:active)
    background-color: $choices

.choices:hover,
.choices:active
  background-color: $choices

.choices__inner
  position: relative
  width: 100%
  min-height: 40px
  padding: 10px 15px
  font-size: 16px
  border: none
  background: inherit
  color: $white
  opacity: 1
  z-index: 5

.choices__list--dropdown,
.choices__list[aria-expanded]
  padding: 0
  margin-top: 1px
  width: 400px
  height: 80px
  z-index: 2
  background: inherit
  border: 1px solid $white
  border-radius: 6px

.choices[data-type*=select-one]::after
  content: url("@/image/gallery/header-arrow.svg")
  right: 25px
  top: 12px
  border: none
  z-index: 11

.choices[data-type*=select-one].is-open::after
  content: url("@/image/gallery/arrow-open.svg")
  margin-top: -2px

.choices__placeholder
  opacity: 1

.is-open .choices__list--dropdown,
.is-open .choices__list[aria-expanded]
  border: 1px solid $dateFoto

.is-focused .choices__inner,
.is-open .choices__inner
  border-color: $white
  box-sizing: border-box

.choices__list--dropdown .choices__placeholder
  display: none

.choices__list--single
  padding: 0
  & .choices__item
    color: $white

.choices__list--dropdown .choices__list,
.choices__list[aria-expanded] .choices__list
  padding: 0

.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item
  margin: 0
  padding: 14px 20px
  height: 40px
  border-bottom: 1px solid $dateFoto

.choices__item
  font-weight: 400
  font-size: 16px
  color: $dateFoto
  box-sizing: border-box

.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted
  border: none
  color: $white
  background-color: $choices

.choices__list--dropdown .choices__item--selectable::after,
.choices__list[aria-expanded] .choices__item--selectable::after
  content: ''

.gallery__checkboxes
  max-width: 150px
  flex-direction: column

.gallery__input-checkbox
  position: absolute
  z-index: -1
  opacity: 0
  &+label
    display: inline-flex
    align-items: center
    user-select: none
  &+label::before
    content: ''
    display: inline-block
    margin-right: 12px
    width: 12px
    height: 12px
    box-sizing: border-box
    border: 1px solid $white
    background-position: top 2.7px left 3px
    background-repeat: no-repeat
    background-size: 4px
    transition: border-color .2s ease-in-out
  &:checked+label::before
    background-image: url("@/image/gallery/checkbox-checked.svg")
    border-color: $menuHover

.gallery__input-checkbox:hover+label::before,
.gallery__input-checkbox:focus+label::before
  border-color: $menuHover

.gallery__label-checkbox
  font-weight: 400
  font-size: 16px
  color: $white
  transition: color .2s ease-in-out
  &:not(:last-child)
    margin-bottom: 13px

.gallery__input-checkbox:focus-visible+label,
.gallery__label-checkbox:hover,
.gallery__input-checkbox:checked+label
  color: $menuHover

.gallery__swiper-container
  position: relative
  padding-top: 25px
  max-width: 1150px
  overflow: hidden
  flex-direction: column-reverse
  justify-content: space-between

.gallery__swiper-wrapper
  width: 100%
  height: 350px
  box-sizing: content-box

.swiper-notification
  display: none

.gallery__slide-wrap
  position: relative
  max-width: 350px
  &::after
    content: url("@/image/gallery/lupa.svg")
    position: absolute
    max-width: 300px
    max-height: 300px
    top: 25px
    left: 25px
    right: 25px
    bottom: 25px
    display: flex
    align-items: center
    justify-content: center
    background-color: $menuBottom
    opacity: 0
    transition: opacity .2s linear
  &::before
    content: ''
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 100%
    box-shadow: inset 25px 25px $menuActive, inset -25px -25px $menuActive
    opacity: 0
    transition: opacity .2s linear
  &:focus::before
    box-shadow: inset 3px 3px $colorDarkPurple, inset -3px -3px $colorDarkPurple
    opacity: 1

.gallery__slide-wrap:hover::after,
.gallery__slide-wrap:active::after,
.gallery__slide-wrap:active::before
  opacity: 1

.gallery__slide-img
  width: 100%
  height: 100%
  object-fit: cover

.gallery__btn-wrap
  position: relative
  width: 130px
  height: 30px
  margin-bottom: 30px
  justify-content: space-between

.gallery__swiper-button-next,
.gallery__swiper-button-prev
  position: relative
  width: 30px
  height: 30px
  top: 22px
  &
    left: 3px

.gallery__swiper-button-next
  right: -3px

.gallery__swiper-pagination
  position: absolute
  left: 50px
  bottom: 2px
  width: 47px
  height: 23px
  margin-right: 11px
  font-weight: 400
  font-size: 16px
  color: $white

.gallery__swiper-button-next::after,
.gallery__swiper-button-prev::after
  position: absolute

.gallery__swiper-button-next::after
  content: ''

.gallery__swiper-button-prev::after
  content: ''

.gallery__swiper-button-next:focus-visible,
.gallery__swiper-button-prev:focus-visible
  outline: none

.gallery__swiper-button-next:focus-visible:not(:hover):not(:active) svg .gallery__svg-focus,
.gallery__swiper-button-prev:focus-visible:not(:hover):not(:active) svg .gallery__svg-focus
  stroke-width: 2

.gallery__swiper-button-next:hover svg path,
.gallery__swiper-button-prev:hover svg path
  fill: $colorPurpleDefault

.gallery__swiper-button-next:active svg path,
.gallery__swiper-button-prev:active svg path
  fill: $colorDarkPurple

.gallery__swiper-button-next:active svg .gallery__svg-focus,
.gallery__swiper-button-prev:active svg .gallery__svg-focus
  stroke-width: 2

.swiper-button-prev::after,
.swiper-rtl .swiper-button-next::after
  content: '' !important

.swiper-button-next::after,
.swiper-rtl .swiper-button-prev::after
  content: '' !important

@media (max-width: 1880px)
  .choices
    width: 280px

  .choices__list--dropdown,
  .choices__list[aria-expanded]
    width: 280px

@media (max-width: 1760px)
  .gallery__content-left
    margin-right: 130px

@media (max-width: 1420px)
  .gallery
    background-image: url("@/image/gallery/bg_1024.png")
    &__container
      padding-bottom: 45px
    &__content-left
      margin-right: 50px

  .choices
    margin-bottom: 115px

@media (max-width: 1008px)
  .gallery
    background-image: url("@/image/gallery/bg_768.png")
    &__container
      flex-direction: column
      padding-bottom: 60.5px
    &__content-left
      margin-right: 0
      margin-bottom: 47px

  .choices
    margin-bottom: 48px

  .gallery__swiper-container
    padding-top: 0

  .gallery__swiper-button-prev
    left: 1px

  .gallery__swiper-button-next
    right: 0px

@media (max-width: 687px)
  .gallery
    background-image: url("@/image/gallery/bg_320.png")
    &__container
      padding-bottom: 21px
    &__title
      margin-bottom: 18px
    &__text
      margin-bottom: 13px

  .choices
    margin-bottom: 37px
    width: 290px
    &__list--dropdown,
    &__list[aria-expanded]
      background-color: $black
    &__list--dropdown,
    &__list[aria-expanded]
      width: 290px

  .gallery__content-left
    margin-bottom: 37px

  .gallery__swiper-container
    flex-direction: column
    align-items: center

  .gallery__swiper-wrapper
    height: 367px
    margin-bottom: 19px

  .gallery__swiper-pagination
    left: 47px
    bottom: 0px
